<template>
    <div class="person">
        姓：<input type="text" v-model="firstName">
        名：<input type="text" v-model="lastName">
        <h2>
            <!-- 注意computed、methods的区别 -->
            姓名：{{ fullName }}
            姓名：{{ fullName}}
            姓名：{{ fullName }}
            姓名：{{ fullName}}
            
            <!-- 姓名：{{ showFullName() }}
            姓名：{{ showFullName() }}
            姓名：{{ showFullName() }}
            姓名：{{ showFullName() }}
            姓名：{{ showFullName() }}
            姓名：{{ showFullName() }} -->
        </h2>
        <button @click="changeFullName()">
            更改全名
        </button>

    </div>

</template>

<script setup lang="ts" name="Person">
import { ref,computed } from 'vue';
    let firstName=ref("")
    let lastName=ref("")
    // computed默认为只读操作
    let fullName=computed(()=>{
        console.log("使用computed对数据进行处理")
        return firstName.value+"-"+lastName.value
    })
    
    // let fullName=computed({
    //     get(){
    //         return firstName.value+"-"+lastName.value
    //     },
    //     set(val){
    //         firstName.value=val.split("-")[0]
    //         lastName.value=val.split("-")[1]

    //     }
    // })

    function showFullName(){
        console.log("使用methods对数据进行处理")
        return firstName.value+"-"+lastName.value
    }
    function changeFullName(){
        fullName.value="li-si"
    }
   

</script>
<style>
.person{
    background-color: lightseagreen;
	box-shadow: 6px 6px 12px gray;
	border-radius: 6px;
	line-height: 40px;
	padding:10px;

}
</style>